<template>
  <div class="body">
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const list = ref(['html', 'css', 'js'])
const props = defineProps({
  data: {
    type: String,
    default: ''
  }
})


watch(() => props.data, (newVal) => {
  if (newVal) {
    list.value.push(newVal)
  }
})


</script>

<style lang="css" scoped></style>